<template>
	<view class="gy-divider" :class="props.textPosition">
		<view v-if="props.text" class="gy-divider-text" :style="{color: props.textColor}">{{ props.text }}</view>
	</view>
</template>

<script lang="ts" setup>

    const props = defineProps({
    	dashed: {
    		type: Boolean,
    		default: false
    	},
    	text: {
    		type: String,
    		default: ""
    	},
    	textPosition: {
    		type: String,
    		default: "center"
    	},
    	textColor: {
    		type: String,
    		default: "#c3c3c3"
    	},
    	lineColor: {
    		type: String,
    		default: "#D6D6D6"
    	}
    });

</script>

<style lang="scss" scoped>
	.gy-divider{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin: var(--gy-gap);
	    .gy-divider-line{
	        flex: 1 1 0%;
	        border-bottom: 1px solid transparent;
	    }
	    .gy-divider-text{
	        max-width: 80%;
	        margin: 0 20rpx;
	        font-size: 26rpx;
	        overflow: hidden;
	        text-overflow: ellipsis;
	        white-space: nowrap;
	        font-weight: 400;
	    }
	}
	.gy-divider.left{
	    .gy-divider-line:first-child{
	        flex: none;
	        width: 60rpx;
	    }
	}
	.gy-divider.right{
	    .gy-divider-line:last-child{
	        flex: none;
	        width: 60rpx;
	    }
	}
	
</style>